<template>
	<view class="wrap">
		<view class="container">
			<view class="firstPart">
				<view class="list">
					<view class="title" @click="GoIndex">精选推荐</view>
					<view class="mini">送花Tips</view>
				</view>
				<view class="list2" @click="GoLanguage">
					<view class="title">花语大全</view>
					<view class="mini">花语寄情</view>
				</view>
				<view class="list3" @click="Gonumber">
					<view class="title">枝数资讯</view>
					<view class="mini">送花助手</view>
				</view>
			</view>
			<view class="SecondPart">
				<view class="title">
					<uni-icons type="paperplane" color="#ef5e25" size="28"></uni-icons>
					<view style="font-size: 36rpx;margin-left: 15rpx;">用户晒单</view>
				</view>

				<view class="none" v-if="list.length==0">
					登录小程序后才可以查看评论哦！
				</view>
				<uni-grid v-else :column="2" :showBorder="false" :square="false">
					<uni-grid-item class="lisitem" v-for="(item,index) in list" :key="index">
						<image @click="Godetails(item)" class="img" :src="item.commenttpbh" mode=""></image>
						<view class="text" @click="Godetails(item)">
							{{item.commentms==null? '暂无文字描述~' : item.commentms}}
							<text
								style="color: #0566ba;font-size: 26rpx;">@{{item.xhmc}}-{{item.xhzl}}-{{item.xhzt}}</text>
						</view>
						<view class="bottom" @click="Godetails(item)">
							<image class="head"
								src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
								mode=""></image>
							<view class="name">{{item.nickname}}</view>
							<!-- <uni-icons class="icons" type="fire" size="17"></uni-icons>
							<view class="sum">{{item.xhxl}}</view> -->
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				list: []
			}
		},
		onShow() {

			var bs = uni.getStorageSync('UserInformation')
			this.token = bs.usertoken

			if (this.token != undefined) {
				this.getComment()
			}

		},
		methods: {
			getComment() {
				uni.showLoading({
					title: '加载中'
				});

				var th = this
				th.requestfs({
					url: '/mall/comment/selectCommentList?bh=' + '',
					Authorization: th.token,
				}).then(res => {
					if (res.data.code == 200) {
						th.list = res.data.data
						uni.hideLoading()
					} else {
						uni.showToast({
							title: "数据请求失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},
			Godetails(item) {

				uni.navigateTo({
					url: '/pages-share/CommentDetals/CommentDetals?item=' + JSON.stringify(item)
				})
			},
			GoIndex() {
				uni.navigateTo({
					url: '/pages-index/IndexproductsList/IndexproductsList?keyWord=' + "毕业季"
				})
			},
			GoLanguage() {
				uni.navigateTo({
					url: '/pages-share/Language/Language'
				})
			},
			Gonumber() {
				uni.navigateTo({
					url: '/pages-share/Number/Number'
				})
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		background: #f3f5f7;
		min-height: 100vh;
		height: auto;

		.container {
			width: 710rpx;
			margin: 0 auto;

			.SecondPart {

				.none {
					width: 100%;
					line-height: 60vh;
					text-align: center;
					color: #a0a0a0;
				}

				.lisitem {
					background: #ffffff;
					width: 48%;
					margin: 0 1% 16rpx 1%;
					border-radius: 10rpx;

					.bottom {
						display: flex;
						margin: 0 10rpx 14rpx 10rpx;

						.name {
							width: 58%;
							color: #737373;
							margin-left: 10rpx;
							margin-top: 8rpx;
						}

						.head {
							width: 60rpx;
							height: 60rpx;
							border-radius: 50%;
						}

						.icons {
							margin-top: 10rpx;
						}

						.sum {
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}

					.img {
						width: 96%;
						height: 350rpx;
						border-radius: 10rpx;
					}

					.text {
						font-size: 28rpx;
						margin: 10rpx;
						padding: 0 6rpx 0 2rpx;
						overflow: hidden; //超出部分隐藏
						text-overflow: ellipsis; //文字隐藏部分显示省略号
						display: -webkit-box; //改变盒子模型
						-webkit-line-clamp: 2; //文字显示几行
						-webkit-box-orient: vertical;
					}
				}

				.title {
					display: flex;
					width: 100%;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 32rpx;
					// padding-left: 40%;
					color: #ef5e25;
				}
			}

			.firstPart {
				display: flex;

				.list {
					color: #ffffff;
					width: 31%;
					margin: 0 auto;
					background-image: linear-gradient(to right, rgba(237, 183, 112, 0.8), rgba(255, 148, 93, 1));
					text-align: center;
					padding: 23rpx 0;
					border-radius: 20rpx;

					.mini {
						font-size: 24rpx;
						opacity: 0.6;
						margin-top: 10rpx;
					}
				}

				.list2 {
					color: #ffffff;
					width: 31%;
					margin: 0 auto;
					background-image: linear-gradient(to right, rgba(254, 143, 106, 0.8), rgba(248, 105, 128, 1));
					text-align: center;
					padding: 23rpx 0;
					border-radius: 20rpx;

					.mini {
						font-size: 24rpx;
						opacity: 0.6;
						margin-top: 10rpx;
					}
				}

				.list3 {
					color: #ffffff;
					width: 31%;
					margin: 0 auto;
					background-image: linear-gradient(to right, rgba(245, 101, 183, 0.8), rgba(191, 99, 237, 1));
					text-align: center;
					padding: 23rpx 0;
					border-radius: 20rpx;

					.mini {
						font-size: 24rpx;
						opacity: 0.6;
						margin-top: 10rpx;
					}
				}
			}

		}

	}
</style>
